<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      a {
        display: block;
        text-decoration: none;
        color: #3c3c3c;
      }
      #wrap {
        width: 414px;
        margin: 10px auto;
        border: 1px solid #000;
        overflow: hidden;
      }
      img {
        display: block;
        width: calc(100% - 20px);
        height: 350px;
        margin: 10px;
      }
      p {
        width: calc(100% - 20px);
        margin: 5px auto;
      }
    </style>
  </head>
  <body>
    <h1 style="text-align: center">详情页</h1>
    <div id="wrap">
      <!-- <img src="./img/28.jpg" alt="" />
			<p>类别：性感</p>
			<p>特点：热情似火</p> -->
    </div>
    <script>
      console.log(location.search); //打印地址栏信息
      //获取所需的元素盒子
      var wrap = document.getElementById("wrap");
      //1、封装获取参数函数
      function getQueryArgs() {
        //2、获取查询你的字符串并去除开头的问号
        var qs = location.search.length > 0 ? location.search.substring(1) : "";
        console.log(qs);
        //3、操作设置
        //3-1、设置存储
        var args = {}; //来存储参数对象
        //3-2、切割
        var items = qs.length ? qs.split("&") : [];
        console.log(items);
        var item = null; //用来再次分割
        var _key = null; //用来存key
        var _val = null; //用来存value
        //3-3、将每一项参数操作，切割，赋值存储
        for (var i = 0; i < items.length; i++) {
          //3-4、切割 =
          item = items[i].split("=");
          console.log(item);
          //decodeURIComponent 是一个 JavaScript 函数，用于解码经过 URI 组件编码的字符串。这个函数会将百分号编码的字符转换回它们对应的字符;例如，如果你有一个经过 URI 编码的字符串，比如 "Hello%20World%21"，使用 decodeURIComponent 函数可以将其解码为 "Hello World!"
          _key = decodeURIComponent(item[0]);
          _value = decodeURIComponent(item[1]);
          console.log(_key, _value);
          //3-5、赋值存储
          if (_key.length) {
            args[_key] = _value;
            console.log(args);
          }
        }
        return args;
      }
      //4、用变量保存获取的参数
      var data = getQueryArgs();
      console.log(data);
      //5、对应渲染
      wrap.innerHTML = `
								<p>标题：${data.title}</p>
								<p>描述：${data.desc}</p>
                <p>来源：${data.source}</p>
							 `;
    </script>
  </body>
</html>
